<template>
  <div>
    <div class="nav">
      <div class="serach">
        <label for="search"></label>
        <input
          type="search"
          class="search"
          id="search"
          placeholder="搜索稀土掘金"
        />
        <div class="search-button">
          <img
            src="./static/photo/search.png"
            alt=""
          />
        </div>
        <div class="creator">
          <div class="creator-left">创作者中心</div>
          <div class="creator-right">▼</div>
        </div>

        <div class="vip">
          <div class="vip-photo">
            <img
              src="./static/photo/viplogo.png"
              alt=""
            />
          </div>
          <div class="vip-name">会员</div>
        </div>

        <div class="loggin">登录</div>
      </div>
    </div>
    <div class="rightfunction">
      <div class="rightfunction-1">
        <div class="rightfuncion-1-calandar">
          <img
            src="./static/photo/calandar.png"
            alt=""
          />
        </div>
        <div class="rightfuncion-1-time">晚上好！</div>
        <div class="rightfuncion-1-sign">去签到</div>
        <div class="rightfuncion-1-tip">点亮你在社区的每一天</div>
      </div>
      <div class="rightfunction-2">
        <a
          target="_blank"
          href="https://juejin.cn/book/7117582869358182403?utm_source=web_banner&utm_medium=banner&utm_campaign=Book_zjk_0803"
        >
          <img
            src="./static/photo/advertisement.png"
            alt=""
          />
        </a>
      </div>
      <div class="rightfunction-3">
        <a
          target="_blank"
          href="https://juejin.cn/app"
        >
          <img
            src="./static/photo/code.png"
            alt=""
          />
        </a>
      </div>
      <div class="rightfunction-4">
        <div class="rightfunction-4-wiriter">🎖️作者榜</div>
        <div class="rightfunction-4-people">
          <a
            target="_blank"
            href="https://juejin.cn/user/3263764828006760"
          >
            <img
              src="./static/photo/people1.png"
              alt=""
            />
          </a>
          <a
            target="_blank"
            href="https://juejin.cn/user/4494459266409912"
          >
            <img
              src="./static/photo/people2.png"
              alt=""
            />
          </a>
          <a
            target="_blank"
            href="https://juejin.cn/user/554605767047053"
          >
            <img
              src="./static/photo/people3.png"
              alt=""
            />
          </a>
        </div>
        <div class="rightfunction-4-item">
          <a
            target="_blank"
            href="https://juejin.cn/recommendation/authors/recommended"
          >完整榜单 ></a>
        </div>
      </div>

      <div class="rightfunction-5">
        <a
          href="https://juejin.cn/book/6844733795329900551"
          target="_blank"
        >
          <img
            src="./static/photo/plug1.jpg"
            alt=""
          />
        </a>
        <a
          href="https://juejin.cn/extension"
          target="_blank"
        >
          <img
            src="./static/photo/plug2.jpg"
            alt=""
          />
        </a>
        <a
          href="https://github.com/xitu/gold-miner"
          target="_blank"
        >
          <img
            src="./static/photo/plug3.jpg"
            alt=""
          />
        </a>
      </div>
      <div class="rightfunction-6">
        <a
          target="_blank"
          href="https://lf3-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/juejin/86857833-55f6-4d9e-9897-45cfe9a42be4.html"
        >用户协议</a>
        <a
          target="_blank"
          href="https://juejin.cn/license"
        >营业执照</a>
        <a
          target="_blank"
          href="https://lf3-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/juejin/7b28b328-1ae4-4781-8d46-430fef1b872e.html"
        >隐私政策</a>
        <a
          target="_blank"
          href="https://juejin.cn/about"
        >关于我们</a><br />
        <a
          target="_blank"
          href="https://juejin.cn/map-author-A-1"
        >站点地图</a>
        <a
          target="_blank"
          href="https://juejin.cn/book/6844733795329900551"
        >使用指南</a>
        <a
          target="_blank"
          href="https://juejin.cn/links"
        >友情链接</a>
        <a
          target="_blank"
          href="https://juejin.cn/more_posts"
        >更多文章</a><br />
        <a
          target="_blank"
          href="https://beian.miit.gov.cn/#/Integrated/index"
        >京ICP备18012699号-3</a><br />
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802026719"
        >
          <img
            src="./static/photo/police.png"
            alt=""
          />
          京公网安备11010802026719号 </a><br />
        <div>版权所有：北京北比信息技术有限公司</div>
        <div>公司地址：北京市海淀区信息路甲28号13层B座13B-5</div>
        <div>公司座机：010-83434395</div>
        <div>
          举报邮箱：
          <a
            target="_blank"
            href=""
          >feedback@xitu.io</a>
        </div>
        <a href=""> ©2022 稀土掘金 </a>
      </div>
      <div class="rightfunction-7">
        <a
          target="_blank"
          href="https://passport.weibo.com/visitor/visitor?entry=miniblog&a=enter&url=https%3A%2F%2Fweibo.com%2Fxitucircle&domain=.weibo.com&ua=php-sso_sdk_client-0.6.36&_rand=1660139056.9579"
        >
          <img
            src="./static/photo/weibo.png"
            alt=""
          />
        </a>
        <img
          target="_blank"
          src="./static/photo/wechat.png"
          alt=""
        />
      </div>
    </div>
    <div class="float">
      <a href="https://juejin.cn/editor/drafts/new?v=2">
        <img
          src="./static/photo/floatpart1.png"
          alt=""
        />
      </a>
      <a href="">
        <img
          src="./static/photo/floatpart2.jpg"
          alt=""
        />
      </a>
      <a href="https://code.juejin.cn/">
        <img
          src="./static/photo/floatpart3jpg.jpg"
          alt=""
        />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Others",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.search {
  width: 350px;
  height: 38px;
  margin-top: 11px;
  margin-left: 780px;
  border-radius: 5px;
  border-width: 1px;
  border-color: rgb(194, 200, 209);
  border-width: 1px;
}

.search:hover {
  border-color: black;
}

.search-button {
  width: 24px;
  height: 24px;
  left: 1100px;
  top: 24px;
  position: absolute;
  background-color: rgb(242, 243, 245);
}

.search-button:hover {
  cursor: pointer;
}

.creator {
  width: 220px;
  height: 36px;
  position: absolute;
  left: 1165px;
  top: 18px;

  display: inline-block;
}

.creator-left {
  width: 100px;
  height: 36px;
  background-color: rgb(30, 128, 255);
  display: inline-block;
  border-radius: 3px;
  text-align: center;
  line-height: 36px;
  color: white;
  margin-right: -4px;
}

.creator-right {
  width: 25px;
  height: 36px;
  background-color: rgb(30, 128, 255);
  display: inline-block;
  border-radius: 3px;
  line-height: 36px;
  color: white;
  text-align: center;
}

.creator-left:hover {
  cursor: pointer;
  background-color: #1171ee;
}

.creator-right:hover {
  cursor: pointer;
  background-color: #1171ee;
}

.vip {
  width: 85px;
  height: 45px;
  position: absolute;
  left: 1320px;
  top: 25px;
}

.vip-photo {
  display: inline-block;
}

.vip-name {
  display: inline-block;
  color: #869ec6;
  font-size: 14px;
  position: absolute;
  top: 4px;
}

.vip-photo:hover {
  cursor: pointer;
}

.vip-name:hover {
  cursor: pointer;
}

.loggin {
  width: 66px;
  height: 36px;
  background-color: #f4f9ff;
  color: #2e89ff;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  border-color: #2e89ff;
  border-width: 0.5px;
  border-style: solid;
  position: absolute;
  left: 1400px;
  top: 20px;
  border-radius: 3px;
}

.loggin:hover {
  cursor: pointer;
}

.rightfunction {
  width: 240px;
  height: 3000px;
  /* background-color: aqua; */
  position: absolute;
  left: 1000px;
  top: 120px;
}

.rightfunction-1 {
  width: 240px;
  height: 96px;
  margin-bottom: 16px;
  background-color: white;
  /* border-style: solid;
    border-width: 1px; */
  border-radius: 3px;
}

.rightfuncion-1-calandar > img {
  display: inline-block;
  position: absolute;
  left: 14px;
  top: 12px;
}

.rightfuncion-1-time {
  display: inline-block;
  position: absolute;
  left: 57px;
  top: 16px;
  font-size: 18px;
  color: #1d2129;
}

.rightfuncion-1-sign {
  width: 72px;
  height: 32px;
  color: #1e80ff;
  border-style: solid;
  border-width: 1px;
  border-radius: 50px;
  display: inline-block;
  position: absolute;
  left: 147px;
  top: 16px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
}

.rightfuncion-1-sign:hover {
  cursor: pointer;
  background-color: #e8f3ff;
}

.rightfuncion-1-tip {
  display: inline-block;
  position: absolute;
  left: 59px;
  top: 55px;
  color: #4e5959;
  font-size: 14px;
}

.rightfunction-2 {
  width: 240px;
  height: 200px;
  background-color: #1171ee;
  border-radius: 3px;
  margin-bottom: 16px;
}

.rightfunction-2 img {
  width: 240px;
  height: 200px;
}

.rightfunction-3 {
  width: 240px;
  height: 74px;
  border-radius: 3px;
  margin-bottom: 16px;
}

.rightfunction-3 img {
  width: 240px;
  height: 74px;
}

.rightfunction-4 {
  width: 240px;
  height: 295px;
  background-color: white;
  margin-bottom: 16px;
}

.rightfunction-4-wiriter {
  font-size: 13.92px;
  color: #333333;
  position: relative;
  left: 15px;
  top: 12px;
  margin-bottom: 15px;
}

.rightfunction-4-people img:nth-child(1) {
  width: 240px;
  height: 75px;
}

.rightfunction-4-people img:nth-child(2) {
  width: 240px;
  height: 69.6px;
  position: relative;
  left: 1px;
}

.rightfunction-4-people img:nth-child(2) {
  width: 240px;
  height: 75px;
}

.rightfunction-4-item {
  text-align: center;
  color: #007fff;
  font-size: 14px;
}

.rightfunction-4-item > a {
  text-decoration: none;
}

.rightfunction-4-item:hover {
  cursor: pointer;
}

.rightfunction-5 {
  width: 240px;
  height: 180px;
  background-color: white;
  margin-bottom: 16px;
}

.rightfunction-5 img:nth-child(1) {
  width: 240px;
  height: 60px;
}

.rightfunction-5 img:nth-child(2) {
  width: 240px;
  height: 60px;
}

.rightfunction-5 img:nth-child(2) {
  width: 240px;
  height: 60px;
}

.rightfunction-6 {
  width: 240px;
  height: 190px;

  margin-bottom: 26px;
}

.rightfunction-6 a {
  color: #909090;
  font-size: 12px;
  text-decoration: none;
}

.rightfunction-6 div {
  color: #909090;
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 0;
}

.rightfunction-7 {
  margin-top: 10px;
  width: 240px;
  height: 24px;
}

.rightfunction-7 img {
  width: 24px;
  height: 24px;
}

.float {
  width: 123px;
  height: 106.2px;
  background-color: white;
  position: absolute;
  left: 1165px;
  top: 58px;
  border-radius: 3px;
  display: none;
}

.float img {
  width: 123px;
  height: 35.4px;
}
</style>